<template>
  <div>
    <div class="hotel-month-acc">
      <div class="top-section"
        style="display: flex; align-items: center; justify-content: space-between; padding: 12px 12px;">
        <div class="header-wrapper" style="margin-bottom: 0;">
          <h3 class="title">酒店周预测对比分析
            <span :class="['acc-title-span', { active: currentAcc === 'day' }]">当天</span>/
            <span :class="['acc-title-span', { active: currentAcc === 'month' }]">当月</span>/
            <span :class="['acc-title-span', { active: currentAcc === 'year' }]">当年累计</span>

          </h3>
        </div>
        <div class="form-wrapper" style="margin-bottom: 0; display: flex; align-items: center; gap: 8px;">
          <div class="form-content" style="display: flex; align-items: center; gap: 8px;">
            <div class="acc-selector">
              <img :src="monthSvg" alt="month" class="button-icon" :title="'看当月'"
                :class="{ active: currentAcc === 'month' }" @click="handleAccChange('month')" />
              <img :src="yearSvg" alt="year" class="button-icon" :title="'看当年'"
                :class="{ active: currentAcc === 'year' }" @click="handleAccChange('year')" />
            </div>
            <div class="form-item">

              <a-date-picker v-model:value="currentMonth" picker="month" :allowClear="false" valueFormat="YYYY-MM"
                :placeholder="'选择月份'" @change="handleSearch" />
            </div>
            <div class="form-item" style="justify-content: center">
              <span class="label">周</span>
              <a-select v-model:value="currentWeek" :options="weekList" :allowClear="false" @change="handleSearch" />
            </div>
            <div class="form-item form-item-center">

              <a-switch v-model:checked="is_extendfield"
                style="margin-right: 0; width: 110px; min-width: 100px; vertical-align: middle;">
                <template #checkedChildren>
                  <span
                    style="display: inline-block; width: 80px; text-align: center; font-size: 12px; color: #fff;">显示全部列</span>
                </template>
                <template #unCheckedChildren>
                  <span
                    style="display: inline-block; width: 80px; text-align: center; font-size: 12px; color: #666;">显示缩略列</span>
                </template>
              </a-switch>
            </div>
            <!-- <div class="form-item">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              <div class="filter-icon-container">
                <img class="icon-screen" src="/@/assets/images/screening.png" @click="handleShowFilter" alt="筛选图标" :title="'过滤设置'" />
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <a-card type="default">
        <div class="card-table-head">
          周预测对比分析
          <div class="card-table-head-remark">
            <a-button type="link" class="ant-btn-icon-only" @click="handleExport">
              <template #icon>
                <download-outlined />
              </template>
            </a-button>
          </div>
        </div>
        <div class="card-table-content">
          <div class="table-scroll-x">
            <table class="fixed-width-table">
              <thead>
                <tr>
                  <th rowspan="3" class="fixed-table-head head-group" data-field="hotelName">项目名称</th>
                  <th :colspan="is_extendfield ? 10 : 3" class="head-group">本周当月预测</th>
                  <th :colspan="is_extendfield ? 10 : 3" class="head-group">当月预算</th>
                  <th :colspan="is_extendfield ? 10 : 3" class="head-group">去年同期</th>
                  <th :colspan="is_extendfield ? 10 : 3" class="head-group">预测vs预算(完成率%)</th>
                  <th :colspan="is_extendfield ? 10 : 3" class="head-group">预测vs去年同期(差异%)</th>
                </tr>
                <tr class="head-layer2">
                  <!-- 本周当月预测 -->
                  <th v-if="is_extendfield">实际出租房间数</th>
                  <th v-if="is_extendfield">可出租房间数</th>
                  <th>出租率</th>
                  <th>平均房价</th>
                  <th v-if="is_extendfield">可售房平均房价</th>
                  <th v-if="is_extendfield">客房收入</th>
                  <th v-if="is_extendfield">餐厅收入</th>
                  <th v-if="is_extendfield">宴会收入</th>
                  <th v-if="is_extendfield">其他收入</th>
                  <th>总收入</th>
                  <!-- 当月预算 -->
                  <th v-if="is_extendfield">实际出租房间数</th>
                  <th v-if="is_extendfield">可出租房间数</th>
                  <th>出租率</th>
                  <th>平均房价</th>
                  <th v-if="is_extendfield">可售房平均房价</th>
                  <th v-if="is_extendfield">客房收入</th>
                  <th v-if="is_extendfield">餐厅收入</th>
                  <th v-if="is_extendfield">宴会收入</th>
                  <th v-if="is_extendfield">其他收入</th>
                  <th>总收入</th>
                  <!-- 去年同期 -->
                  <th v-if="is_extendfield">实际出租房间数</th>
                  <th v-if="is_extendfield">可出租房间数</th>
                  <th>出租率</th>
                  <th>平均房价</th>
                  <th v-if="is_extendfield">可售房平均房价</th>
                  <th v-if="is_extendfield">客房收入</th>
                  <th v-if="is_extendfield">餐厅收入</th>
                  <th v-if="is_extendfield">宴会收入</th>
                  <th v-if="is_extendfield">其他收入</th>
                  <th>总收入</th>
                  <!-- 预测vs预算(完成率%) -->
                  <th v-if="is_extendfield">实际出租房间数</th>
                  <th v-if="is_extendfield">可出租房间数</th>
                  <th>出租率</th>
                  <th>平均房价</th>
                  <th v-if="is_extendfield">可售房平均房价</th>
                  <th v-if="is_extendfield">客房收入</th>
                  <th v-if="is_extendfield">餐厅收入</th>
                  <th v-if="is_extendfield">宴会收入</th>
                  <th v-if="is_extendfield">其他收入</th>
                  <th>总收入</th>
                  <!-- 预测vs去年同期(差异%) -->
                  <th v-if="is_extendfield">实际出租房间数</th>
                  <th v-if="is_extendfield">可出租房间数</th>
                  <th>出租率</th>
                  <th>平均房价</th>
                  <th v-if="is_extendfield">可售房平均房价</th>
                  <th v-if="is_extendfield">客房收入</th>
                  <th v-if="is_extendfield">餐厅收入</th>
                  <th v-if="is_extendfield">宴会收入</th>
                  <th v-if="is_extendfield">其他收入</th>
                  <th>总收入</th>
                </tr>
                <tr>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>
                  <th>%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>


                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>
                  <th>%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>


                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>
                  <th>%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>


                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>
                  <th>%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>


                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>
                  <th>%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th v-if="is_extendfield">%</th>
                  <th>%</th>


                </tr>
              </thead>
              <tbody>
                <tr v-for="row in dataList" :key="row.hotelCode">
                  <td class="fixed-table-head">{{ row.hotelName }}</td>
                  <!-- 本周当月预测 -->
                  <td v-if="is_extendfield">{{ row.p01 }}</td>
                  <td v-if="is_extendfield">{{ row.p02 }}</td>
                  <td>{{ row.p03 }}</td>
                  <td>{{ row.p04 }}</td>
                  <td v-if="is_extendfield">{{ row.p05 }}</td>
                  <td v-if="is_extendfield">{{ row.p06 }}</td>
                  <td v-if="is_extendfield">{{ row.p07 }}</td>
                  <td v-if="is_extendfield">{{ row.p08 }}</td>
                  <td v-if="is_extendfield">{{ row.p09 }}</td>
                  <td>{{ row.p10 }}</td>
                  <!-- 当月预算 -->
                  <td v-if="is_extendfield">{{ row.b01 }}</td>
                  <td v-if="is_extendfield">{{ row.b02 }}</td>
                  <td>{{ row.b03 }}</td>
                  <td>{{ row.b04 }}</td>
                  <td v-if="is_extendfield">{{ row.b05 }}</td>
                  <td v-if="is_extendfield">{{ row.b06 }}</td>
                  <td v-if="is_extendfield">{{ row.b07 }}</td>
                  <td v-if="is_extendfield">{{ row.b08 }}</td>
                  <td v-if="is_extendfield">{{ row.b09 }}</td>
                  <td>{{ row.b10 }}</td>
                  <!-- 预测vs预算(完成率%) -->
                  <td v-if="is_extendfield">{{ row.a01 }}</td>
                  <td v-if="is_extendfield">{{ row.a02 }}</td>
                  <td>{{ row.a03 }}</td>
                  <td>{{ row.a04 }}</td>
                  <td v-if="is_extendfield">{{ row.a05 }}</td>
                  <td v-if="is_extendfield">{{ row.a06 }}</td>
                  <td v-if="is_extendfield">{{ row.a07 }}</td>
                  <td v-if="is_extendfield">{{ row.a08 }}</td>
                  <td v-if="is_extendfield">{{ row.a09 }}</td>
                  <td>{{ row.a10 }}</td>
                  <!-- 预测vs预算(完成率%) -->
                  <td v-if="is_extendfield">{{ row.c01 }}</td>
                  <td v-if="is_extendfield">{{ row.c02 }}</td>
                  <td>{{ row.c03 }}</td>
                  <td>{{ row.c04 }}</td>
                  <td v-if="is_extendfield">{{ row.c05 }}</td>
                  <td v-if="is_extendfield">{{ row.c06 }}</td>
                  <td v-if="is_extendfield">{{ row.c07 }}</td>
                  <td v-if="is_extendfield">{{ row.c08 }}</td>
                  <td v-if="is_extendfield">{{ row.c09 }}</td>
                  <td>{{ row.c10 }}</td>
                  <!-- 预测vs去年同期(差异%) -->
                  <td v-if="is_extendfield">{{ row.d01 }}</td>
                  <td v-if="is_extendfield">{{ row.d02 }}</td>
                  <td>{{ row.d03 }}</td>
                  <td>{{ row.d04 }}</td>
                  <td v-if="is_extendfield">{{ row.d05 }}</td>
                  <td v-if="is_extendfield">{{ row.d06 }}</td>
                  <td v-if="is_extendfield">{{ row.d07 }}</td>
                  <td v-if="is_extendfield">{{ row.d08 }}</td>
                  <td v-if="is_extendfield">{{ row.d09 }}</td>
                  <td>{{ row.d10 }}</td>

                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </a-card>
    </div>
  </div>

</template>

<script>
import dayjs from 'dayjs';
import { defineComponent } from 'vue';
import { onMounted, nextTick } from 'vue';
import { DatePicker, Switch, Button } from 'ant-design-vue';
import { defHttp } from '/@/utils/http/axios';
import * as MathUtil from '/@/utils/MathUtil';
import * as DateUtil from '/@/utils/dateUtil';
 
import SearchFilterModal from '/@/views/applications/ui/SearchFilterModal.vue';
import TableCard from '/@/views/applications/ui/TableCard.vue';
import monthSvg from '/@/assets/svg/month-svg.svg';
import yearSvg from '/@/assets/svg/year-svg.svg';
import daySvg from '/@/assets/svg/day-svg.svg';
import * as XLSX from 'xlsx-js-style';
import { CalendarOutlined, DownloadOutlined } from '@ant-design/icons-vue';

const VALUE_KEYS = [
  { prefix: 'p', valueKey: 'preFvalue' },
  { prefix: 'b', valueKey: 'budgetFvalue' },
  { prefix: 'a', valueKey: 'actualFvalue' },
];

const DETAIL_INDEXS = [0, 1, 4, 5, 6, 7, 8];

export default defineComponent({
  name: 'HotelWeekPreContrast',
  components: {
    TableCard,
    ADatePicker: DatePicker,
    ASwitch: Switch,
    AButton: Button,
    CalendarOutlined,
    SearchFilterModal,
    DownloadOutlined,
  },
  data() {
    return {
      showFilter: false,
      loading: false,
      tableHigh: { x: '100%', y: 'calc(60vh)' },
      is_extendfield: true,
      monthSvg,
      yearSvg,
      daySvg,
      monthList: DateUtil.generateMonthList(),
      weekList: DateUtil.generateWeekList().map((w) => {
        return { label: `第${w}周`, value: w };
      }),
      currentWeek: 1,
      
      currentMonth: dayjs(),
      currentAcc: 'month',
      hotelList: [],
      currentCode: '',
      subjectList: [],
      dataList: [],
      dataColumns: [
        {
          title: '项目名称',
          dataIndex: 'hotelName',
          key: 'hotelName',
          width: 220,
          align: 'left',
          ellipsis: true,
          fixed: 'left',
          // scopedSlots: {
          //   customRender: "hotelName"
          // }
        },
      ],
      sumKeys: [],
      colKeys: ['hotelCode', 'hotelName'],
      pageHeader: {
        collapsed: false,
        title: '酒店周盈利预测表',
        formProrps: {
          layout: 'horizontal',
        },
        formOptions: [
          {
            label: '预测月份',
            slotName: 'dateslot',
          },
          {
            label: '周',
            slotName: 'weekslot',
          },
          {
            label: '展示详细列',
            slotName: 'detailslot',
          },
        ],
      },
      searchFormOptions: [
        {
          value: 'dateslot',
          label: '预测月份',
          selected: true,
          showDetails: true,
        },
        {
          value: 'weekslot',
          label: '周',
          selected: true,
          showDetails: true,
        },
        {
          value: 'detail',
          label: '展示详细列',
          selected: true,
          showDetails: true,
        },
      ],
      exportHeader: [],
      showSubject: [],
    };
  },
  created() {
    Promise.all([
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }),
      defHttp.post({
        url: '/data/query',
        data: {
          labelCode: 'getHotelPresubject',
          sqlParams: [],
          pageIndex: 1,
          pageSize: 100,
        },
      }),
    ]).then(([res1, res2]) => {
      if (res1.result.length > 0) {
        this.hotelList = res1.result;
        this.currentCode = res1.result.map((d) => d.code).join(',');
      }
      if (res2.datas.totalCount > 0) {
        this.subjectList = res2.datas.data;
        this.sortSubjectCode = this.subjectList.filter((s) => s.name === '总收入')[0];
        VALUE_KEYS.forEach((k) => {
          this.subjectList.forEach((s) => {
            this.colKeys.push(`${k.prefix}${s.code}`);
            if (s.calMode === 'DEFAULT') {
              this.sumKeys.push(`${k.prefix}${s.code}`);
            }
          });
        });
      }
      this.fetchBaseInfo();
    });
  },

  methods: {
    handleShowFilter() {
      this.showFilter = true;
    },

    handleSaveFilter(updatedFields) {
      this.selectedFields = updatedFields;
      this.searchFormOptions = updatedFields;

      // 更新表单显示
      const dateField = updatedFields.find((f) => f.value === 'date');
      const detailField = updatedFields.find((f) => f.value === 'detail');

      // 根据选择的字段更新表单显示
      this.$nextTick(() => {
        const formWrapper = document.querySelector('.form-wrapper');
        if (formWrapper) {
          const dateItem = formWrapper.querySelector('.form-item:nth-child(1)');
          const detailItem = formWrapper.querySelector('.form-item:nth-child(2)');

          if (dateItem) {
            dateItem.style.display = dateField?.selected ? 'flex' : 'none';
          }
          if (detailItem) {
            detailItem.style.display = detailField?.selected ? 'flex' : 'none';
          }
        }
      });

      // 重新查询数据
      this.fetchBaseInfo();
    },
    fetchBaseInfo() {
      this.loading = true;
      this.dataList = [];
      defHttp
        .post({
          url: '/data/query',
          data: {
            labelCode: 'getHotelMonthPreActualBudget',
            sqlParams: [
              {
                key: 'code',
                value: this.currentCode,
              },
              {
                key: 'month',
                value: dayjs(this.currentMonth).format('YYYYMM'),
              },
              {
                key: 'week',
                value: this.currentWeek,
              },
            ],
            pageIndex: 1,
            pageSize: 5000,
          },
        })
        .then((res) => {
          if (res.datas.totalCount > 0) {
            const incomeList = res.datas.data;
            const hotelData = this.hotelList.map((h) => {
              let d = {
                hotelCode: h.code,
                hotelName: h.name,
              };
              VALUE_KEYS.forEach((k) => {
                this.subjectList.forEach((s) => {
                  d[`${k.prefix}${s.code}`] = '';
                  if (s.calMode === 'DEFAULT') {
                    incomeList.forEach((i) => {
                      if (i.subjectCode === s.code && i.hotelCode === h.code) {
                        d[`${k.prefix}${s.code}`] = Math.round(i[k.valueKey]) || 0;
                      }
                    });
                  }
                });
              });
              this.wrapData(d);
              return d;
            });

            const hotelMap = this.hotelList.reduce((acc, hotel) => {
              if (incomeList.filter((d) => d.hotelCode === hotel.code).length > 0) {
                const key = hotel.hpositionName;
                if (!acc[key]) {
                  acc[key] = [];
                }
                acc[key] = acc[key].concat(hotelData.filter((d) => d.hotelCode === hotel.code));
              }
              return acc;
            }, {});

            let dataList = [];
            Object.keys(hotelMap).forEach((key) => {
              const pDataList = hotelMap[key].sort((a, b) => b[`c${this.sortSubjectCode}`] - a[`c${this.sortSubjectCode}`]);
              dataList = dataList.concat(pDataList);
              const initialTotals = this.colKeys
                .filter((c) => c !== 'hotelName')
                .reduce(
                  (acc, field) => {
                    acc[field] = 0;
                    return acc;
                  },
                  { hotelName: `${key}酒店小计` }
                );

              const subSum = pDataList.reduce((acc, hotel) => {
                this.sumKeys.forEach((field) => {
                  acc[field] += Number(hotel[field]);
                });
                return acc;
              }, initialTotals);
              this.wrapData(subSum);
              dataList.push(subSum);
            });
            this.dataList = dataList;
          } else {
            this.dataList = [];
          }
          this.loading = false;
        });
    },
    wrapData(data) {
      VALUE_KEYS.forEach((k) => {
        this.subjectList
          .filter((s) => s.calMode === 'AUTO')
          .forEach((s) => {
            Object.keys(data)
              .filter((d) => d === `${k.prefix}${s.code}`)
              .forEach((d) => {
                const replacedFormula = s.formula.replace(/#\{(\d+)\}/g, (_, code) => data[`${k.prefix}${code}`] || 0);
                data[d] = eval(replacedFormula) || 0;
              });
          });
      });
      this.subjectList.forEach((s) => {
        data[`c${s.code}`] = this.percent2DFormatter(this.safeDivide(data[`p${s.code}`], data[`b${s.code}`]), 0);
      });
      this.subjectList.forEach((s) => {
        data[`d${s.code}`] = this.diffPercent2Formatter(data[`p${s.code}`], data[`a${s.code}`], 0);
      });
    },
    summaryData() {
      const initialTotals = this.colKeys
        .filter((c) => c !== 'hotelName' && c !== 'hotelCode')
        .reduce(
          (acc, field) => {
            acc[field] = 0;
            return acc;
          },
          { hotelName: '合计' }
        );
      const d = this.dataList
        .filter((d) => d.hotelName.includes('小计'))
        .reduce((sum, item) => {
          this.sumKeys.forEach((field) => {
            sum[field] += Number(item[field]);
          });
          return sum;
        }, initialTotals);
      this.wrapData(d);
      this.customRenderData(d, this.getDataColumns());
      return [d];
    },
    customRenderData(data, columns) {
      columns.forEach((c) => {
        if (c.customRender) {
          const value = { text: data[c.dataIndex] };
          data[c.dataIndex] = c.customRender(value);
        }
        if (c.children) {
          this.customRenderData(data, c.children);
        }
      });
    },
    getDataColumns() {
      let dataColumns = this.dataColumns;
      const colKeys = [
        { prefix: 'p', title: '本周当月预测' },
        { prefix: 'b', title: '当月预算' },
        { prefix: 'a', title: '去年同期' },
        { prefix: 'c', title: '预测vs预算(完成率%)' },
        { prefix: 'd', title: '预测vs去年同期(差异%)' },
      ];

      let showSubject = this.subjectList;
      if (!this.is_extendfield) {
        showSubject = showSubject && showSubject.filter((s, index) => !DETAIL_INDEXS.includes(index));
      }

      colKeys.forEach((c, ci) => {
        dataColumns = dataColumns.concat(
          showSubject.map((m, index) => {
            return {
              dataIndex: `${c.prefix}${m.code}`,
              width: index === (this.is_extendfield ? 4 : 1) ? 200 : 130,
              align: 'right',
              className: ci % 2 === 0 ? '' : 'table-header-color',
              title: index === (this.is_extendfield ? 4 : 1) ? `${c.title}` : '',
              children: [
                {
                  title: m.name,
                  dataIndex: `${c.prefix}${m.code}`,
                  key: `${c.prefix}${m.code}`,
                  width: index === (this.is_extendfield ? 4 : 1) ? 200 : 130,
                  align: 'right',
                  className: ci % 2 === 0 ? '' : 'table-header-color',
                  customRender: (val) => (['c', 'd'].includes(c.prefix) ? val.text : this.colRender(val.text, val.record, m)),
                },
              ],
            };
          })
        );
      });
      return dataColumns;
    },
    getExportHeader() {
      let exportHeader = this.exportHeader;
      exportHeader = [this.getDataColumns().map((c) => c.title), this.getDataColumns().map((c) => (c.children ? c.children[0].title : null))];
      exportHeader[0][1] = exportHeader[0][this.is_extendfield ? 5 : 2];
      exportHeader[0][this.is_extendfield ? 11 : 4] = exportHeader[0][this.is_extendfield ? 15 : 5];
      exportHeader[0][this.is_extendfield ? 21 : 7] = exportHeader[0][this.is_extendfield ? 25 : 8];
      exportHeader[0][this.is_extendfield ? 31 : 10] = exportHeader[0][this.is_extendfield ? 35 : 11];
      exportHeader[0][this.is_extendfield ? 41 : 13] = exportHeader[0][this.is_extendfield ? 45 : 14];
      return exportHeader;
    },
    getExprotMerges() {
      return [
        { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
        { s: { r: 0, c: 1 }, e: { r: 0, c: this.is_extendfield ? 10 : 3 } },
        {
          s: { r: 0, c: this.is_extendfield ? 11 : 4 },
          e: { r: 0, c: this.is_extendfield ? 20 : 6 },
        },
        {
          s: { r: 0, c: this.is_extendfield ? 21 : 7 },
          e: { r: 0, c: this.is_extendfield ? 30 : 9 },
        },
        {
          s: { r: 0, c: this.is_extendfield ? 31 : 10 },
          e: { r: 0, c: this.is_extendfield ? 40 : 12 },
        },
        {
          s: { r: 0, c: this.is_extendfield ? 41 : 13 },
          e: { r: 0, c: this.is_extendfield ? 50 : 15 },
        },
      ];
    },
    handleSearch() {
      this.fetchBaseInfo();
    },
    colRender(val, record, m) {
      if (m.showFormatter) {
        const [methodName, ...params] = m.showFormatter.split('|');
        if (typeof this[methodName] === 'function') {
          return this[methodName](val, ...params);
        }
      }
      return val;
    },
    checkTag(key) {
      return key.includes('小计');
    },
    percentFormatter(value) {
      return (value * 100).toFixed(0) + '%';
    },
    percentTipFormatter(params) {
      return (
        params[0].axisValue +
        '<br />' +
        params
          .map((p) => {
            return `${p.marker} ${p.seriesName}: ${(p.data * 100).toFixed(0)}%`;
          })
          .join('<br />')
      );
    },
    currencyWFormatter(value, dot = 2, unit = '万') {
      return MathUtil.currencyWFormatter(value, dot, unit);
    },
    currencyWNFormatter(value, dot = 0) {
      return MathUtil.currencyWNFormatter(value, dot);
    },
    percent2DFormatter(value, dot = 2) {
      return MathUtil.percent2DFormatter(value, dot);
    },
    diffPercent2Formatter(thisData, lastData, dot = 2) {
      return MathUtil.diffPercent2Formatter(thisData, lastData, dot);
    },
    dot2Formatter(value, dot = 2) {
      return MathUtil.dot2Formatter(value, dot);
    },
    dateRangeFormatter(dataRange) {
      return DateUtil.dateRangeFormatter(dataRange);
    },
    dateFormatter(data) {
      return DateUtil.dateFormatter(data);
    },
    monthFormatter(data) {
      return DateUtil.monthFormatter(data);
    },
    safeDivide(numerator, denominator) {
      return MathUtil.safeDivide(numerator, denominator);
    },
    
    handleAccChange(type) {
      this.currentAcc = type;
      this.fetchBaseInfo();
    },
    
    handleExport() {
      console.log('导出数据', this.dataList);
      // 1. 获取表头
      const header = this.getExportHeader(); // 二维数组
      // 2. 获取数据
      const data = this.dataList.map(item => {
        const row = [];
        this.getDataColumns().forEach(col => {
          if (col.dataIndex) {
            row.push(item[col.dataIndex] || '');
          }
        });
        return row;
      });
      // 3. 合并表头和数据
      const aoa = [...header, ...data];
      // 4. 生成 worksheet
      const ws = XLSX.utils.aoa_to_sheet(aoa);
      // 5. 合并单元格
      ws['!merges'] = this.getExprotMerges();
      // 6. 可选：设置样式（如加粗表头）
      header.forEach((row, rowIdx) => {
        row.forEach((cell, colIdx) => {
          const cellRef = XLSX.utils.encode_cell({ r: rowIdx, c: colIdx });
          if (ws[cellRef]) {
            ws[cellRef].s = {
              font: { bold: true },
              alignment: { horizontal: 'center', vertical: 'center' },
            };
          }
        });
      });
      // 7. 导出
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '周预测对比分析');
      XLSX.writeFile(wb, '酒店周预测对比分析.xlsx');
    },
  },
});
</script>

<style lang="less" scoped>
@import "@/styles/fixtable.less";


.main-frame-desktop-header {
  padding: 24px;
  background: #fff;
  margin-bottom: 16px;
}

.top-section {
  background: #fff;
  padding: 24px 24px 0;
}

.header-wrapper {
  margin-bottom: 24px;

  .title {
    font-size: 18px;
    font-weight: 600;
    color: #1a253b;
    margin: 0;
    padding: 0;
  }
}

.form-wrapper {
  margin-bottom: 24px;

  .form-content {
    display: flex;
    align-items: center;
  }

  .form-item {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;

    &:first-child {
      padding-left: 0;
      justify-content: flex-end;
    }

    &:last-child {
      padding-right: 0;
    }

    .label {
      margin-right: 12px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
    }
  }

  .form-item-center {
    justify-content: center;
  }

  .filter-icon-container {
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-left: 10px;
  }

  .icon-screen {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: scale-down;
  }

  .filter-icon-container:hover {
    background-color: #e1ebf9;
  }

  .icon-screen:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.main-content {
  flex: 1;
  background: @content-inside-bg;
  padding: 16px 0;
  overflow: hidden;

  .card-flex-all {
    height: 100%;
  }

  &-title-custom {
    color: #00b578 !important;
    font-weight: 500;
  }
}

.card-flex-all {
  margin-bottom: 24px;
}

@media @desktop {
  .top-content {
    display: flex;
  }

  .card-flex-all {
    flex: 1 1 calc(100% - 10px);
  }

  .card-flex {
    flex: 1 1 calc(50% - 10px);
  }

  
}

.card-table-head {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 0 0 0;
    margin-bottom: 8px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    overflow: visible;
}
.card-table-head-remark  {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

tbody > tr > td::after {
    content: "";
    display: block;
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 2px;
    height: 0;
    border-bottom: 2px dashed #cccaca;
    width: 80%;
    margin: 0 auto;
    pointer-events: none;
}

</style>
